﻿@using MiniWeb.Core.Dtos
@using MiniWeb.Core.Entities
@using WFramework.MvcPager
@{
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
    var typelist = ViewData["typelist"] as List<ProductsTypesDto>;
    var tuijianlist = ViewData["tuijianPro"] as PagedList<ProductsInfoDto>;

    var typeinfo = ViewData["typeinfo"] as ProductsType;
    var classinfo = ViewData["classinfo"] as ProductsClass;
    var imglist = ViewData["imglist"] as List<ProductsImgInfo>;
}

@model ProductsInfo
<div class="lump-top area">
   <div class="q-nav">
        全部结果 &gt; <a href="/goods/list">所有商品</a>
        @if (typeinfo!=null)
        {
            <text>&gt;<a href="/goods/list?rid=@typeinfo.ID">@typeinfo.TypeName</a></text>
        }
        @if(classinfo !=null)
        {
           <text> &gt;<a href="/goods/list?cid=@classinfo.ID">@classinfo.ClassName</a></text>
            }
        </div>
    <div class="q-search"></div>
</div>

<div class="area">
	<div class="itemElement-box">
        <div class="m-itemZoom frame">
            <div class="bigImg">
                
                <img src="@Model.ProductImg" width="350" height="310" alt="" id="midimg">
                
                <div style="left: 167px; top: 124px; display: none;" id="winSelector"></div>
            </div>
            <!--bigImg end-->
            <div id="bigView" style="width: 470.571428571429px; height: 406.451612903226px; top: 0px; left: 365px; display: none;">
                <img width="900" height="700" alt="" src="@Model.ProductImg" style="left: -429.428571428571px; top: -280px;">
            </div>
            <div class="smallImg">
                <div class="scrollbutton smallImgUp disabled"></div>
                <div id="imageMenu">
                    <ul>
                        
                        <li id="onlickImg"><img src="@Model.ProductImg" width="68" height="68" alt=""></li>
                        
                        @foreach (var item in imglist)
                        {
                            <li><img src="@item.ProductsImg" width="68" height="68" alt=""></li>
                        }
                        
                       
                        
                    </ul>
                </div>
                <div class="scrollbutton smallImgDown"></div>
                <!--smallImg end-->
            </div>
            <script type="text/javascript">
                $(document).ready(function () {
                    // 图片上下滚动
                    var count = $("#imageMenu li").length - 3; /* 显示 4 个 li标签内容 */
                    var interval = $("#imageMenu li:first").width();
                    var curIndex = 0;

                    $('.scrollbutton').click(function () {
                        if ($(this).hasClass('disabled')) return false;

                        if ($(this).hasClass('smallImgUp')) --curIndex;
                        else ++curIndex;

                        $('.scrollbutton').removeClass('disabled');
                        if (curIndex == 0) $('.smallImgUp').addClass('disabled');
                        if (curIndex == count - 1) $('.smallImgDown').addClass('disabled');

                        $("#imageMenu ul").stop(false, true).animate({ "marginLeft": -curIndex * interval + "px" }, 600);
                    });

                    // 解决 ie6 select框 问题
                    $.fn.decorateIframe = function (options) {
                        if ($.browser.msie && $.browser.version < 7) {
                            var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
                            $(this).each(function () {
                                var $myThis = $(this);
                                //创建一个IFRAME
                                var divIframe = $("<iframe />");
                                divIframe.attr("id", opts.iframeId);
                                divIframe.css("position", "absolute");
                                divIframe.css("display", "none");
                                divIframe.css("display", "block");
                                divIframe.css("z-index", opts.iframeZIndex);
                                divIframe.css("border");
                                divIframe.css("top", "0");
                                divIframe.css("left", "0");
                                if (opts.width == 0) {
                                    divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");
                                }
                                if (opts.height == 0) {
                                    divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");
                                }
                                divIframe.css("filter", "mask(color=#fff)");
                                $myThis.append(divIframe);
                            });
                        }
                    }
                    $.fn.decorateIframe.defaults = {
                        iframeId: "decorateIframe1",
                        iframeZIndex: -1,
                        width: 0,
                        height: 0
                    }
                    //放大镜视窗
                    $("#bigView").decorateIframe();

                    //点击到中图
                    var midChangeHandler = null;

                    $("#imageMenu li img").bind("click", function () {
                        if ($(this).attr("id") != "onlickImg") {
                            midChange($(this).attr("src").replace("small", "mid"));
                            $("#imageMenu li").removeAttr("id");
                            $(this).parent().attr("id", "onlickImg");
                        }
                    }).bind("mouseover", function () {
                        if ($(this).attr("id") != "onlickImg") {
                            window.clearTimeout(midChangeHandler);
                            midChange($(this).attr("src").replace("small", "mid"));
                            $(this).css({ "border": "1px solid #990000" });
                        }
                    }).bind("mouseout", function () {
                        if ($(this).attr("id") != "onlickImg") {
                            $(this).removeAttr("style");
                            midChangeHandler = window.setTimeout(function () {
                                midChange($("#onlickImg img").attr("src").replace("small", "mid"));
                            }, 1000);
                        }
                    });

                    function midChange(src) {
                        $("#midimg").attr("src", src).load(function () {
                            changeViewImg();
                        });
                    }

                    //大视窗看图
                    function mouseover(e) {
                        if ($("#winSelector").css("display") == "none") {
                            $("#winSelector,#bigView").show();
                        }

                        $("#winSelector").css(fixedPosition(e));
                        e.stopPropagation();
                    }


                    function mouseOut(e) {
                        if ($("#winSelector").css("display") != "none") {
                            $("#winSelector,#bigView").hide();
                        }
                        e.stopPropagation();
                    }


                    $("#midimg").mouseover(mouseover); //中图事件
                    $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件

                    var $divWidth = $("#winSelector").width(); //选择器宽度
                    var $divHeight = $("#winSelector").height(); //选择器高度
                    var $imgWidth = $("#midimg").width(); //中图宽度
                    var $imgHeight = $("#midimg").height(); //中图高度
                    var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度

                    function changeViewImg() {
                        $("#bigView img").attr("src", $("#midimg").attr("src").replace("mid", "big"));
                    }
                    changeViewImg();
                    $("#bigView").scrollLeft(0).scrollTop(0);
                    function fixedPosition(e) {
                        if (e == null) {
                            return;
                        }
                        var $imgLeft = $("#midimg").offset().left; //中图左边距
                        var $imgTop = $("#midimg").offset().top; //中图上边距
                        X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
                        Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
                        X = X < 0 ? 0 : X;
                        Y = Y < 0 ? 0 : Y;
                        X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
                        Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;

                        if ($viewImgWidth == null) {
                            $viewImgWidth = $("#bigView img").outerWidth();
                            $viewImgHeight = $("#bigView img").height();
                            if ($viewImgWidth < 200 || $viewImgHeight < 200) {
                                $viewImgWidth = $viewImgHeight = 800;
                            }
                            $height = $divHeight * $viewImgHeight / $imgHeight;
                            $("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
                            $("#bigView").height($height);
                        }

                        var scrollX = X * $viewImgWidth / $imgWidth;
                        var scrollY = Y * $viewImgHeight / $imgHeight;
                        $("#bigView img").css({ "left": scrollX * -1, "top": scrollY * -1 });
                        $("#bigView").css({ "top": 0, "left": $(".frame").width() + 15 });

                        return { left: X, top: Y };
                    }

                });
            </script>
            
        </div>
        <div class="m-itemContent">
        	<div class="m-name">
                <h1>@Model.ProductsName</h1>
                <p class="name-p"> </p>
            </div>
            <ul class="m-summary">
            	<li class="oldpri">
                	<div class="dt">价　　格：</div>
                    <div class="dd">￥@Model.CPrice</div>
                </li>
                <li class="pri">
                    <div class="dt">促销价格：</div>
                    <div class="dd">￥@Model.Price</div>
                </li>
                <li class="pri2">
                    <div class="dt">促销信息：</div>
                    <div class="dd"><i>直降</i>已优惠￥@(Model.CPrice-Model.Price)</div>
                </li>
                
              
                <li class="service">
                	<div class="dt">服　　务：</div>
                    <div class="dd">由 <b>西藏土特产商城</b> 发货并提供售后服务。</div>
                </li>
                <li class="sales">
                	<div class="dt"> 销 量：</div>
                    <div class="dd"><b>@Model.SellNum</b>件</div>
                   @* <div class="promise">支持：<i title="上午下单，下午送达" id="mise-1"></i><i id="mise-2"></i><i id="mise-3"></i><i id="mise-4"></i><i id="mise-5"></i><i id="mise-6"></i><i id="mise-7"></i><i id="mise-8"></i><i id="mise-9"></i><i id="mise-10"></i><i id="mise-11"></i><i id="mise-12"></i><i id="mise-13"></i><i id="mise-14"></i></div>*@
                </li>
            </ul><!--m-summary-->
            <ul class="m-choose">
            	<li class="amount">
                    <div class="dt">数　　量：</div>
                    <div class="dd">
                        <div class="num">
                            <input name="goods_id" id="goods_id" type="hidden" value="88">
						    <s class="add"></s>
						    <input id="goods_quantity" name="goods_quantity" type="text" value="1" class="final_k">
						    <s class="reduce"></s>
                        </div>
                        <span>库存 @Model.KuCunNum 件</span>
                    </div>
                </li>
                <li class="btn">
                	<input type="button" class="u-btn btn-buy" value="加入购物车" href="javascript:void(0);" onclick="CartAdd1(this, '/', 0, '/shopping/cart.aspx','88');">
                    <input type="button" class="u-btn btn-add" value="立即购买" href="javascript:void(0);" onclick="CartAdd1(this, '/', 1, '/shopping/confirm.aspx','88');">
                </li>
            </ul><!--m-choose-->
        </div>
	</div>
</div>

<div class="sub-box"><div class="area">
	
    <div class="lump-content clear">
    @Html.Action("LeftClum","MainLayout")
        <div class="right-column">
        	<div class="bd-1 mgbt-10">
        		<div class="m-title s-tt-2"><h2>商品详情</h2><i></i></div>
                <div class="m-content">
                	@MvcHtmlString.Create(Model.Des)
                </div>
            </div><!--bd-1-->
        </div><!--right-->
    </div><!--lump-content-->

    <link href="/templates/speciality/css/pro.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/templates/speciality/js/global-ko.js"></script>
@Html.Action("SeeHistoryAndLove","MainLayout")
</div></div>


